<script setup>
import * as echarts from 'echarts'
import { ref, computed, watch, onMounted, onBeforeUnmount, markRaw } from 'vue'

defineOptions({
  name: 'PageEcharts',
  options: {
    // apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
    // shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
    styleIsolation: 'shared',
  },
})

const props = defineProps({
  // 图表配置项
  options: {
    type: Object,
    default: () => ({})
  },
  // 图表高度
  height: {
    type: [String, Number],
    default: '300px'
  },
  // 图表宽度
  width: {
    type: [String, Number],
    default: '100%'
  },
})

// 图表DOM引用
const chartRef = ref(null)
// 图表实例
const chartInstance = ref(null)

// 使用计算属性监听配置变化
const options = computed(() => props.options)


// 计算样式
const chartStyle = computed(() => {
  const style = {}
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  }
  if (props.height) {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  }
  return style
})
// 防抖函数
const debounce = (fn, delay = 300) => {
  let timer = null
  const debounced = function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
      timer = null
    }, delay)
  }
  
  // 添加取消方法，用于清理定时器
  debounced.cancel = () => {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
  }
  
  return debounced
}

// 窗口大小变化处理函数（添加防抖处理）
const resizeHandler = debounce(() => {
  if (chartRef.value) {
    chartRef.value.resize()
  }
}, 200)

// 注册窗口大小变化事件
uni.onWindowResize(resizeHandler)

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  const chartContainer = chartRef.value
  if (chartContainer) {
    // 初始化图表实例
    chartContainer.init(echarts).then(chart => {
      if (chart) {
        chartInstance.value = markRaw(chart)
        // 设置图表配置
        if (options.value && typeof options.value === 'object') {
          chartInstance.value.setOption(options.value, {
            notMerge: true,
          })
        }
      }
    }).catch(error => {
      console.error('初始化图表失败:', error)
    })
  }
}
watch(
  () => options.value,
  (options) => {
    if (chartInstance.value) {
      try {
        if (options && typeof options === 'object') {
          chartInstance.value.setOption(options, {
            notMerge: true,
          });
        } else {
          console.warn('图表配置更新无效或为空');
        }
      } catch (error) {
        console.error('更新图表配置失败:', error);
      }
    }
  },
  { deep: true },
);

onMounted(() => {
  initChart()
})

// 组件销毁前清理资源
onBeforeUnmount(() => {
  console.log('PageEcharts组件销毁 - 开始清理资源')
  
  // 移除窗口大小变化监听
  uni.offWindowResize(resizeHandler)
  console.log('PageEcharts组件销毁 - 已移除窗口大小变化监听')
  
  // 取消防抖函数中的定时器
  if (resizeHandler.cancel) {
    resizeHandler.cancel()
    console.log('PageEcharts组件销毁 - 已取消防抖函数中的定时器')
  }
  
  // 销毁图表实例
  if (chartInstance.value) {
    chartInstance.value.dispose()
    chartInstance.value = null
    console.log('PageEcharts组件销毁 - 已销毁图表实例')
  }
  
  // 清空引用
  chartRef.value = null
  console.log('PageEcharts组件销毁 - 已清空DOM引用')
  
  console.log('PageEcharts组件销毁 - 资源清理完成')
})

</script>

<template>
    <l-echart ref="chartRef" :style="chartStyle"></l-echart>
</template>

<style lang="scss" scoped>

</style>
